<template>
	<view class="collect-dish-container">
		<uni-popup ref="message" type="message" class="add-message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="1000" border-radius="100px"
				class="add-message"></uni-popup-message>
		</uni-popup>

		<view class="header">
			<view class="headnavi">
				<image class="arrow" src="../../static/home/main/details/arrow.png" @click="goBack()"></image>
				<view class="navi-title">选择收藏菜单</view>
			</view>
		</view>

		<view class="dish-list-container">
			<view class="dish-list" @click="confirmAddDish(1)">
				<view class="image-container">
					<image class="dish-list-image" :src="favoriteSrc" alt="/static/my/grey.png"></image>
					<image class="favorite-icon" src="/static/my/Icon-love.png"></image>
				</view>
				<view class="fav-dish-list-info">
					<text class="body-bold-text">我喜欢的菜品</text>
					<text class="body-normal-text">{{favDishCount}}道菜品</text>
				</view>

			</view>

			<view class="dish-list" v-for="(dish, index) in createdDishLists" :key="index"
				@click="confirmAddDish(dish.dishListId)">
				<view class="image-container">
					<image class="dish-list-image" :src="dish.imageSrc||'/static/chishenme/defaut-dish-list-image.png'"
						alt="/static/chishenme/defaut-dish-list-image.png"></image>
				</view>
				<view class="dish-list-info">
					<text class="body-bold-text">{{dish.name}}</text>
					<text class="body-normal-text">{{dish.dishCount}}道菜品</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//页面效果
				msgType: 'success',
				messageText: '这是一条成功提示',

				//数据
				dishId: 0,
				favoriteSrc: '/static/my/grey.png',
				favDishCount: 0,
				createdDishLists: [{
					dishListId: '0',
					name: '菜单名',
					dishCount: 0,
					imageSrc: '/static/chishenme/defaut-dish-list-image.png',
				}],
				userInfo: {
					userName: '',
					userImg: '',
					id: '',
					followersCount: 0, //关注的人
					fansCount: 0, //粉丝数
				},
			}
		},
		onLoad(options) {
			if (options.id) {
				this.dishId = parseInt(options.id); // 转换为整数类型 
			}
		},
		onShow() {
			const userInfo = uni.getStorageSync('userInfo');
			this.userInfo.userName = userInfo.data.userName;
			this.userInfo.id = userInfo.data.id;
			this.getFavDishListImage();
			this.getCreatedDishLists();
			this.getDishCount(1)
				.then(dishCount => {
					/* console.log('Dish count:', dishCount); */
					this.favDishCount = dishCount;
					
					// 在这里处理 dishCount，例如更新UI或进行其他操作  
				})
				.catch(error => {
					console.error('An error occurred:', error);
				});;
		},
		methods: {
			confirmAddDish(id) {
				// 显示确认弹窗
				uni.showModal({
					title: '添加菜品',
					content: '确定要添加这个菜品到菜单中吗？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确定
							this.addDishToDishList(id);
						} else if (res.cancel) {
							// 用户点击了取消
							console.log('用户取消了添加');
						}
					},
					fail: (err) => {
						console.error('弹窗显示失败', err);
					}
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1 // 返回上一层，如果需要返回到上上层，可以设置为2  
				});
			},

			popMessage(type, text) {
				this.msgType = type
				this.messageText = text
				this.$refs.message.open()
			},

			getFavDishListImage() {
				const url = 'http://localhost:8080/preference/getMenuImage/' + this.userInfo.id + '?menuId=' + 1;
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						this.favoriteSrc = (res.data == '无菜单图片') ? '/static/my/grey.png' : res.data;
						/* console.log(res); */
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getCreatedDishLists() {
				const url = 'http://localhost:8080/preference/' + this.userInfo.id + '/getMenus';
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						/* console.log(res); */
						this.createdDishLists = [];
						// 遍历 res.data.data 数组  
						res.data.data.forEach(item => {
							// 获取对象的键和值  
							const keys = Object.keys(item);
							const dishListId = keys[0]; // 假设每个对象只有一个键  
							const name = item[dishListId];
							this.getDishCount(dishListId)
								.then(dishCount => {
									const url2 =
										'http://localhost:8080/preference/getMenuImage/' +
										this
										.userInfo.id + '?menuId=' + dishListId;
									uni.request({
										url: url2,
										method: 'GET',
										success: (res2) => {
											const menuImage = (res2.data == '无菜单图片') ? '' : res2.data;
											const newDish = {
												dishListId: dishListId,
												name: name,
												dishCount: dishCount,
												imageSrc: menuImage,
												toBeDeleted: false,
											};
											
											console.log(newDish);
											this.createdDishLists.push(
												newDish);
										},
										fail: (err) => {
											console.error(err);
											// 在这里处理请求失败的逻辑
										}
									});
								})
								.catch(error => {
									console.error('An error occurred:', error);
								});

						});


					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getDishCount(id) {
				const url = 'http://localhost:8080/preference/' + this.userInfo.id + '/getMenuDishes?menuId=' + id;

				return new Promise((resolve, reject) => {
					uni.request({
						url: url,
						method: 'GET',
						success: (res) => {
							const dishCount = res.data.data.length - 1;
<<<<<<< HEAD
							if (dishCount < 0) {
								dishCount = 0
=======
							if(dishCount<0){
								dishCount=0
>>>>>>> cf370fbbdd0e2619b30401affbcab9dcb463763f
							}
							resolve(dishCount); // 使用 resolve 来传递异步操作的结果  
						},
						fail: (err) => {
							console.error(err);
							reject(err); // 使用 reject 来传递异步操作的错误  
						}
					});
				});
			},
			addDishToDishList(dishListId) {
<<<<<<< HEAD
				const url = 'http://localhost:8080/preference/' + this.userInfo.id +
					'/addDishToMenu?menuId=' + dishListId + '&dishId=' + this.dishId;
=======
				const url = 'http://8.138.90.16:8080/preference/' + this.userInfo.id +
					'/addDishToMenu?menuId=' +dishListId + '&dishId=' + this.dishId;
>>>>>>> cf370fbbdd0e2619b30401affbcab9dcb463763f
				uni.request({
					url: url,
					method: 'POST',
					success: (res) => {
						console.log(res);
						this.popMessage("success", "菜品收藏成功！");
						setTimeout(() => {
							this.goBack();
						}, 1500);
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.add-message{
		border-radius: 30px;
		margin: 3vh 3vw 0 3vw;
		overflow: hidden;
	}
	.collect-dish-container {
		display: flex;
		flex-direction: column;

		.edit-message {
			border-radius: 30px;
			margin: 3vh 3vw 0 3vw;
			overflow: hidden;
		}

		.body-normal-text {
			font-size: 35rpx;
			color: #303133;
		}

		.body-bold-text {
			font-size: 37.5rpx;
			color: #303133;
			font-weight: bold;
		}

		.header {
			display: flex;
			flex-direction: column;
			position: fixed;
			z-index: 2;

			.headnavi {
				/* height: 10%; */
				width: 100vw;
				background-color: white;
				position: fixed;
				display: flex;

				box-shadow: 0rpx 10rpx 20rpx 0rpx #e5e5e5;
				padding-bottom: 35rpx;

				.arrow {
					/* transform: rotate(180deg); */
					width: 6vw;
					height: 3vh;
					margin-top: 5vh;
					margin-left: 5vw;
				}

				.navi-title {
					margin-top: 5vh;
					margin-left: 24vw;
					font-size: 40rpx;
					color: #FF8D1A;

				}
			}
		}

		.dish-list-container {
			//test
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-top: 10vh;

			.dish-list {
				display: flex;
				position: relative;
				padding-left: 35rpx;
				padding-right: 35rpx;
				padding-top: 17rpx;
				padding-bottom: 17rpx;

				.image-container {
					height: 25vw;
					width: 25vw;
					position: relative;

					.dish-list-image {
						height: 25vw;
						width: 25vw;
						border-radius: 17rpx;
						z-index: 1;
					}

					.favorite-icon {
						height: 9vw;
						width: 10vw;
						z-index: 2;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}

				.dish-list-info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;

					.body-bold-text {
						margin: 17rpx 17rpx 5rpx 17rpx;
					}

					.body-normal-text {
						margin: 5rpx 17rpx 17rpx 17rpx;
					}
				}

				.operation {
					margin-left: auto;
					align-self: center;
					z-index: 999;

					.more {
						width: 10rpx;
						height: 50rpx;
						padding: 35rpx;
					}
				}

				.delete {
					position: absolute;
					z-index: 1000;
					right: 20rpx;
					padding: 20rpx;
					top: 25%;
					transform: translateY(-50%);
					box-shadow: 2px 2px 5px 0px rgba(122, 122, 122, 0.7);
					background-color: #E5E5E5;
				}

				.cancel {
					position: absolute;
					z-index: 1000;
					right: 20rpx;
					padding: 20rpx;
					top: 75%;
					transform: translateY(-50%);
					box-shadow: 2px 2px 5px 0px rgba(122, 122, 122, 0.7);
					background-color: #E5E5E5;
				}



				.fav-dish-list-info {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 40vw;

					.body-bold-text {
						margin: 17rpx 17rpx 5rpx 17rpx;
					}

					.body-normal-text {
						margin: 5rpx 17rpx 17rpx 17rpx;
					}
				}

				.go-to-blindbox-button {

					font-size: 4vw;
					background-color: #FF8D1A;
					color: #FFFFFF;
					border-radius: 30rpx;
					align-self: center;
					white-space: nowrap;
					padding: 10rpx;
					margin-left: auto;
					z-index: 3;
				}


			}

			.empty {
				padding: 35rpx;
				color: #A6A6A6;
				align-self: center;
			}
		}
	}
</style>